<template>
    <div>
        <el-form class="loginForm"
                 :ref="mainForm"
                 :model="userInfo" :rules="rules">

            <el-form-item prop="username" class="loginItem">
                <el-input v-model.trim="userInfo.username" ref="username">
                    <template slot="prepend">账号:</template>
                </el-input>
            </el-form-item>


            <el-form-item prop="password" class="loginItem">
                <el-input v-model="userInfo.password">
                    <template slot="prepend">密码:</template>
                </el-input>
            </el-form-item>
            <el-form-item prop="passwordPack" class="loginItem">
                <el-input v-model="passwordPack">
                    <template slot="prepend">密码再输入一遍:</template>
                </el-input>
            </el-form-item>
            <el-form-item prop="nickname" class="loginItem">
                <el-input v-model="userInfo.nickname">
                    <template slot="prepend">昵称:</template>
                </el-input>
            </el-form-item>

            <el-form-item>
                <el-button type="primary" icon="el-icon-edit"
                           @click="reg">注册
                </el-button>
                <el-button type="warning" icon="el-icon-remove"
                           @click="()=>$router.push('/login')">登录
                </el-button>
            </el-form-item>
        </el-form>
    </div>
</template>

<script>
    // import New from './components/New.vue';
    export default {

        name: "Reg",
        components: {
            // New,Old,
        },
        props: {
            sampleP: {
                type: Number,
                default: 0
            },
        },
        data() {
            return {
                sampleD: 'value',
                mainForm: 'mainForm',
                /*
                * {
  "isEnable": true,
  "lastLoginTime": "2021-06-07T12:52:02.017Z",
  "nickname": "string",
  "password": "string",
  "userId": 0,
  "username": "string"
}       */
                userInfo: {
                    nickname: "姜维",
                    password: "",
                    username: ""
                },
                passwordPack: "",
                rules: {
                    username: [
                        {required: true, message: '请输入账号', trigger: 'blur'},
                        {pattern: /^\w+$/, message: '请输入字母/数字/下划线', trigger: ['blur', 'change']},
                        {required: true, validator: this.validateUsername, trigger: 'blur'}
                    ],
                    password: [
                        {pattern: /^\w+$/, message: '请输入字母/数字/下划线', trigger: ['blur', 'change']},
                    ],
                    passwordPack: [
                        {pattern: /^\w+$/, message: '请输入字母/数字/下划线', trigger: ['blur', 'change']},
                        {required: true, validator: this.validatePassword, trigger: 'blur'}
                    ]


                }
            }
        },
        computed: {
            // sampleC() {
            //     return this.sampleD+'--';
            // }
        },
        created() {
        },
        mounted() {
            this.$refs['username'].focus();
        },
        methods: {
            sampleM() {

            },
            validateUsername(rule, value, callback) {
                let isExits = false;
                this.$http({
                    method: 'get',
                    url: `/regAbout/usernameExits?username=${this.userInfo.username}`,
                    // data: this.userInfo,
                }).then(res => {
                    console.log("res " + res.data)
                    isExits = res.data;
                    if (isExits) {
                        return callback(new Error('用户名已经存在'));
                    } else {
                        callback()
                    }
                }).catch(res => {
                    this.$message.warning(JSON.stringify(res.data))
                });

            },
            validatePassword(rule, value, callback) {
                console.log(value);

                if (this.passwordPack !== this.userInfo.password) {
                    return callback(new Error('两次密码不一致'))
                } else {
                    callback()
                }
            },
            reg() {
                this.$notify({title: '系统提示：',
                message: JSON.stringify(this.userInfo)})
                this.$http({
                    method: 'post',
                    url: '/regAbout/register',
                    data: this.userInfo,
                }).then(res => {
                    this.$message.warning(JSON.stringify(res.data))

                    if (res.data) {
                        this.$notify({title: '系统提示：',
                        message: JSON.stringify(this.userInfo.username+"注册成功，2秒后即将跳转到登录页面")});
                        setTimeout(()=>{
                            this.$router.push({
                                name:'login',
                                params:{
                                    username:this.userInfo.username,
                                }
                            });
                        },2000);
                    }
                    //this.total = res.data.total;
                    //this.newsResults = res.data.results;
                }).catch(res => {
                    this.$message.warning(JSON.stringify(res.data))
                });
            }

        },
        watch: {
            // sampleC(newValue, oldValue) {
            //
            // }
        },
    }
</script>

<style scoped>
    /*<style lang='scss' scoped>*/
    .loginForm {
        background-color: gray;
        width: 80%;
        margin: 0 auto;
        border-radius: 10px;

    }

    .loginItem {
        margin: 5px auto;
        padding: 10px;
    }
</style>